<template>
  <div class="period-select-wrap">
    <el-form-item v-if="!isExhibition" :prop="moduleName + '.' + typeField" label-width="80px">
      <el-select v-model="selectData[typeField]" :placeholder="typePlaceholder" :class="[selectData && selectData[typeField] === otherValue ? 'small-input' : '']" popper-class="global-select-down" @change="changeHandler">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
    </el-form-item>
    <div v-if="selectData && selectData[typeField] === otherValue && !isExhibition" class="period-name">
      <el-form-item :prop="moduleName + '.' + nameField" label-width="80px" label="">
        <el-input v-model="selectData[nameField]" :placeholder="namePlaceholder" :type="nameType" :maxlength="maxLength" />
      </el-form-item>
    </div>
    <div v-if="isExhibition">
      <span v-if="selectData && selectData[typeField]">{{ selectData[typeField] | mapOptions(options) }}</span>
      <span v-else>--</span>
      <span v-if="selectData && selectData[typeField] === otherValue" style="color: #666;">( {{ selectData[nameField] }} )</span>
    </div>
  </div>
</template>
<script>
import { mapOptions } from '@/filters';
import { settlePeriodOptions } from '../../module/options';
export default {
  name: 'OtherSelectGroup',
  filters: {
    mapOptions
  },
  model: {
    prop: 'params',
    event: 'change'
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return null;
      }
    },
    moduleName: {
      type: String,
      default: ''
    },
    typeField: {
      type: String,
      default: 'type'
    },
    options: {
      type: Array,
      default: () => { return []; }
    },
    otherValue: {
      type: Number,
      default: null
    },
    typePlaceholder: {
      type: String,
      default: ''
    },
    nameField: {
      type: String,
      default: 'name'
    },
    nameType: {
      type: String,
      default: 'number'
    },
    namePlaceholder: {
      type: String,
      default: ''
    },
    isExhibition: {
      type: Boolean,
      default: false
    },
    maxLength: {
      type: Number,
      default: 64
    }
  },
  data() {
    return {
      settlePeriodOptions
    };
  },
  computed: {
    selectData: {
      get() {
        return this.params;
      },
      set(val) {
        this.$emit('change', val);
      }
    }
  },
  methods: {
    changeHandler(value) {
      if (value !== this.otherValue) {
        this.selectData[this.nameField] = '';
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.period-select-wrap {
  display: flex;
  .small-input {
     & ::v-deep {
      .el-input__inner {
        max-width: unset !important;
        min-width: unset !important;
        width: 105px;
      }
    }
  }
  .period-name {
    & ::v-deep {
      .el-input__inner {
        max-width: unset !important;
        min-width: unset !important;
        width: 125px;
      }
    }
  }
}
</style>
